<template>
  <div class="ele-body ele-body-card">
    <!-- 顶部统计快 -->
    <a-row :gutter="16">
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-card class="analysis-chart-card" :bordered="false">
          <div class="ele-text-secondary ele-cell">
            <div class="ele-cell-content">牛总数(头)</div>
            <a-tooltip title="公司下牛的总数">
              <question-circle-outlined />
            </a-tooltip>
          </div>
          <h1 class="analysis-chart-card-num">{{estrusCountData.cattleTotal ? estrusCountData.cattleTotal : 0}}</h1>
        </a-card>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-card class="analysis-chart-card" :bordered="false">
          <div class="ele-text-secondary ele-cell">
            <div class="ele-cell-content">已绑定智能发情帖设备总数(头)</div>
            <a-tooltip title="当前时刻已绑定智能发情帖设备牛的总数">
              <question-circle-outlined />
            </a-tooltip>
          </div>
          <h1 class="analysis-chart-card-num">{{estrusCountData.bindEstrusTotal ? estrusCountData.bindEstrusTotal : 0}}</h1>
        </a-card>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-card class="analysis-chart-card" :bordered="false">
          <div class="ele-text-secondary ele-cell">
            <div class="ele-cell-content">当前时刻处于爬跨状态的数量(头)</div>
            <a-tooltip title="公司下处于爬跨状态牛的总数">
              <question-circle-outlined />
            </a-tooltip>
          </div>
          <h1 class="analysis-chart-card-num">{{estrusCountData.estrusTotal ? estrusCountData.estrusTotal : 0}}</h1>
        </a-card>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24" />
    </a-row>

    <!-- 销售额、访问量 -->
    <a-card :bordered="false" :body-style="{ padding: 0 }">
      <a-tabs
        size="large"
        class="monitor-card-tabs"
      >
        <a-tab-pane tab="当前处于爬跨状态的牛(前十条)" key="saleroom" />
        <template #rightExtra>
          <a-space size="middle" class="analysis-tabs-extra">
            <a-button class="ele-text-success" @click="openShowCattleListPageDialog">更多数据</a-button>
          </a-space>
        </template>
      </a-tabs>
      <div style="padding-bottom: 10px">
        <a-row :gutter="16">
          <a-col :lg="17" :md="8" :sm="24" :xs="24">
            <div class="demo-monitor-rank-item ele-cell">
              <ele-tag shape="circle" style="border: none">*</ele-tag>
              <div class="ele-cell-content text-width">所属牧场</div>
              <div class="ele-cell-content text-width">牛号</div>
              <div class="ele-cell-content text-width">爬跨开始时间</div>
              <div class="ele-text-secondary text-width">持续时间(秒)</div>
            </div>
            <div
              v-for="(item, index) in cattleList"
              :key="index"
              class="demo-monitor-rank-item ele-cell"
            >
              <ele-tag
                shape="circle"

                style="border: none"
              >
                {{ index + 1 }}
              </ele-tag>
              <div class="ele-cell-content text-width">{{ item.oxtallName }}</div>
              <div class="ele-cell-content text-width">{{ item.cattleNo }}</div>
              <div class="ele-cell-content text-width">{{ item.beginTime }}</div>
              <div class="ele-text-secondary text-width">{{ item.estrusTime }}</div>
            </div>
          </a-col>
          <a-col :lg="7" :md="8" :sm="24" :xs="24"  />
        </a-row>
      </div>
    </a-card>

    <a-card :bordered="false" :body-style="{ padding: 0 }">
      <a-tabs
        size="large"
        class="monitor-card-tabs"
      >
        <a-tab-pane tab="爬跨历史数据" key="saleroom" />
      </a-tabs>
      <div style="padding-bottom: 10px">
        <div class="block-interval">
          <a-card :bordered="false">
            <a-form layout="inline" :model="tableWhere">
              <a-row>
                <a-form-item label="开始时间:">
                  <a-date-picker v-model:value="tableWhere.searchBeginTime" type="date" show-time format="YYYY-MM-DD HH:mm:ss"
                                 valueFormat="YYYY-MM-DD HH:mm:ss"/>
                </a-form-item>
                <a-form-item label="结束时间:">
                  <a-date-picker v-model:value="tableWhere.searchEndTime" type="date" show-time format="YYYY-MM-DD HH:mm:ss"
                                 valueFormat="YYYY-MM-DD HH:mm:ss"/>
                </a-form-item>
                <a-form-item class="ele-text-center">
                  <a-space>
                    <a-button type="primary" @click="reload">查询</a-button>
                    <a-button @click="tableReset">重置</a-button>
                  </a-space>
                </a-form-item>

              </a-row>
            </a-form>
          </a-card>
        </div>

        <a-card :bordered="false">
          <ele-pro-table
            ref="table"
            row-key="cattleId"
            :datasource="tableDatasource"
            :columns="tableColumns"
            :where="tableWhere"
            :scroll="{ x: 'max-content' }"
          >
          </ele-pro-table>
        </a-card>
      </div>
    </a-card>

    <cattle-manager-monitor-estrusanalysis-cattlelist v-if="showCattleList" v-model:visible="showCattleList"  @done="reload" />
  </div>
</template>

<script>
import {DeviceCattleEstrusRangeApi} from "@/api/property/cattlesports/DeviceCattleEstrusRangeApi";
import CattleManagerMonitorEstrusanalysisCattlelist from './estrusanalysis-cattlelist.vue'
export default {
  name: 'CattleManagerMonitorEstrusanalysis',
  components: {
    CattleManagerMonitorEstrusanalysisCattlelist
  },
  data() {
    return {
      estrusCountData : {},
      loadEstrusCountTimer: null,
      cattleList : [],
      loadEstrusCattleListTimer : null,
      showCattleList : false,
      tableColumns: [
        {
          title: '牛号',
          dataIndex: 'cattleNo',
          width: 200,
        },
        // {
        //   title: '位置信息',
        //   dataIndex: 'oxtallName',
        //   width: 350,
        //   customRender: function (row) {
        //     if (row.record.ranchName != null && row.record.oxtallName != null) {
        //       return row.record.ranchName + '-' + row.record.oxtallName;
        //     } else {
        //       return '-';
        //     }
        //
        //   }
        // },
        {
          title: '爬跨开始时间',
          dataIndex: 'beginTime',
          width: 200,
        },
        {
          title: '爬跨结束时间',
          dataIndex: 'endTime',
          width: 200,
        },
        {
          title: '爬跨时长(秒)',
          dataIndex: 'estrusTime',
        }
      ],
      // 表格搜索条件
      tableWhere: {
        "sortBy" : "begin_time",
        "orderBy" : "desc"
      },
    };
  },
  mounted() {
    this.getEstrusCount();
    this.loadEstrusCountTimer = setInterval(this.getEstrusCount, 30000);

    this.getEstrusCattleList();
    this.loadEstrusCattleListTimer = setInterval(this.getEstrusCattleList, 30000);
  },
  beforeUnmount() {
    clearInterval(this.loadEstrusCountTimer);
    clearInterval(this.loadEstrusCattleListTimer);
  },
  methods: {
    openShowCattleListPageDialog() {
      this.showCattleList = true;
    },
    getEstrusCount() {
      let that = this;
      DeviceCattleEstrusRangeApi.statisticsEstrusCount({}).then(result => {
        console.log(result);
        that.estrusCountData = result || {};
      });
    },
    getEstrusCattleList() {
      let that = this;
      let params = {
        pageNo: 1,
        pageSize: 10
      };
      DeviceCattleEstrusRangeApi.findeEtrusingCattlePage(params).then(result => {
        that.cattleList = result.rows ? result.rows : [];
      });
    },
    reload() {
      this.selection = [];
      this.$refs.table.reload({page: 1});
    },

    /**
     * 重置搜索
     *
     * @author cancan
     * @date 2022/03/05 14:48
     */
    tableReset() {
      this.tableWhere.searchBeginTime = '';
      this.tableWhere.searchEndTime = '';
      this.tableWhere.sortBy = 'begin_time';
      this.tableWhere.orderBy = 'desc';
      this.$nextTick(() => {
        this.reload();
      });
    },
    /**
     * 获取表格数据
     *
     * @author fengshuonan
     * @date 2022/5/8 15:18
     */
    tableDatasource({page, limit, where, orders}) {
      return DeviceCattleEstrusRangeApi.findPage({...where, ...orders, pageNo: page, pageSize: limit});
    }
  }
};
</script>

<style scoped>
/* 统计卡片 */
.analysis-chart-card :deep(.ant-card-body) {
  padding: 16px 22px 12px 22px;
}

.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 40px;
}

.analysis-chart-card :deep(.ant-divider) {
  margin: 12px 0;
}

/* 销售额、访问量 */
.monitor-card-tabs :deep(.ant-tabs-nav) {
  padding: 0 16px 0 4px;
}

.monitor-card-tabs :deep(.ant-tabs-tab) {
  padding-left: 2px;
  padding-right: 2px;
  margin: 0 12px !important;
}

.demo-monitor-title {
  padding: 6px 20px;
}

.text-width {
  width : 250px !important;
}

.demo-monitor-rank-item {
  padding: 0 20px;
  margin-top: 18px;
}

@media screen and (max-width: 880px) {
  .analysis-tabs-extra {
    display: none;
  }
}
</style>
